@import '../../../../variables';

:host {
  display: block;
  //overflow: hidden;
  text-align: start;

  &.global {
    position: fixed;
    top: $s;
    left: $s;
    right: $s;
    overflow: visible;
    transform-origin: left top;

    @include mq(xs, max) {
      transform: translateX(0) !important;
    }

    @include mq(xs) {
      margin-top: 20px;
      max-width: 632px;
      width: 80%;
      top: $s * 6;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
    }
  }
}

:host-context(.isTouchOnly).global {
  top: auto;
  bottom: $s;
}

$short-syntax-bar-height: 28px;
.add-task-form {
  width: 100%;
  position: relative;
  color: #000000;
  border-radius: $card-border-radius;
  overflow: hidden;

  @include darkTheme {
    color: #eeeeee;
  }

  .input-wrapper {
    position: relative;
  }

  input {
    padding-bottom: $short-syntax-bar-height;

    display: block;
    width: 100%;
    font-size: 16px;
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
    outline: 0;
    border-color: $c-primary;

    padding-right: 96px !important;
    padding-left: $s * 2;
    line-height: 42px;

    color: #000000;
    background: #ffffff;
  }

  input {
    @include darkTheme {
      background-color: $dark-theme-bg-lighter;
      color: $dark-theme-text-color-most-intense;
    }
  }

  &.isElevated input {
    @include darkTheme {
      background-color: $dark-theme-bg-lightest;
      color: $dark-theme-text-color-most-intense;
    }
  }
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.is-loading {
  padding: $s;

  ::ng-deep .mat-option-text {
    display: flex;
    justify-content: center;
  }
}

.button-controls {
  position: absolute;
  right: $s * 0.5;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  margin-top: -0.5 * $short-syntax-bar-height;
}

.switch-add-to-bot-btn,
.switch-add-to-btn {
  opacity: 0.4;

  &:hover {
    opacity: 1;
  }
}

.info-bar {
  padding: 0 1.75 * $s;
  height: $short-syntax-bar-height;
  line-height: $short-syntax-bar-height;
  margin-top: -1 * $short-syntax-bar-height;
  color: $light-theme-text-color-muted;
  background: #ffffff;
  border-top: 1px dashed $light-theme-extra-border-color;
  position: relative;
  z-index: 1;
  //border-bottom-left-radius: $card-border-radius;
  //border-bottom-right-radius: $card-border-radius;
  pointer-events: none;

  @include darkTheme {
    background-color: $dark-theme-bg-lightest;
    border-color: $dark-theme-extra-border-color;
    color: $dark-theme-text-color-muted;
  }
}

.info-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
